import React from 'react';
import ReactDOM from 'react-dom';

import store from '@/redux/store'

import {Provider} from 'react-redux'
import {
  nanoid
} from 'nanoid'
import {
  BrowserRouter,
  HashRouter
} from 'react-router-dom'

import {
  createCommonSingleton
} from '@/plugins/utils/index'

const createPreviewFileDiv = createCommonSingleton(function () {
  const id = `p-f-${nanoid()}`
  const div = document.createElement('div')
  div.style.width = 0
  div.style.height = 0
  div.id = id
  document.body.appendChild(div)
  return div
})


//  reactInstance -- 需要渲染的组件，必传， 后续的 rest 会全部传入 reactInstance 中
const createModalInstanceApi = ({
  reactInstance,
  ...rest
}) => {

  if (!reactInstance) {
    console.error('请传入必须要渲染的组件')
    return
  }

  let div = window.sdiv = createPreviewFileDiv() // 获取  需要用来 预览 文件的  容器 dom

  const Comp = reactInstance

  ReactDOM.render(
    <Provider store = {store}>
      <BrowserRouter>
        <Comp key = {nanoid()} {...rest} />
      </BrowserRouter>
    </Provider>,
    div
  )
}

export default createModalInstanceApi